<template>
  <div class="app-container" v-loading="pageLoading">
    <el-button type="primary" class="fr" @click="createItem" v-permission="'warehouse.add'">创建</el-button>
    <div class="filter-container">
      <el-input style="width: 300px" placeholder="输入查询条件按回车" clearable prefix-icon="el-icon-search" class="filter-item"
        @keyup.enter.native="research" @clear="research" v-model="query.queryString"></el-input>
      <el-button class="filter-item" type="success" plain @click="research">查询</el-button>
      <el-button class="filter-item" type="info" plain @click="exportData" :loading="exportLoading">导出 </el-button>
    </div>
    <z-table :list="list" :tableProps="tableProps" :columns="columns" @editItem="editItem" @deleteItem="deleteItem">
      <template v-slot:content="v">
        <span v-if="v.key === 'warehouse_type' && typeOptions.length">
          {{ getWhType(v.row[v.key]) }}
        </span>
        <span v-else-if="v.key === 'is_locked'">
          <span class="text-label" :class="v.row[v.key] ? 'bg-green' : 'bg-gray'">
            {{v.row[v.key]?'已锁定':'未锁定'}}
          </span>
        </span>
        <span v-else>{{ v.row[v.key] }}</span>
      </template>
    </z-table>
    <z-pagination :pagination="pagination" :total="total" :page.sync="query.page" :limit.sync="query.size"
      @change="getList"></z-pagination>
    <z-form-dialog :name="name" :data="data" :formProps="formProps" :fields="fields" @submit="submit"
      :submitLoading="submitLoading" :visible.sync="editFormVisible"></z-form-dialog>
  </div>
</template>

<script>
import commonMixin from '@/views/_common/mixin'
export default {
  mixins: [commonMixin],
  name: 'warehouse',
  data: function () {
    return {
      api: this.$api.warehouse,
      apiEdit: this.$api.warehouse + 'add',
      name: '仓库',
      columns: [
        { title: '仓库代码', key: 'warehouse_code', width: 200 },
        { title: '仓库名称', key: 'warehouse_name' },
        { title: '仓库类型', key: 'warehouse_type' },
        { title: '先进先出管控', key: 'fifo_control', width: 120 },
        { title: '锁定状态', key: 'is_locked', width: 120 },
        { title: '修改人', key: 'modify_user', width: 100 },
        { title: '最后修改', key: 'modify_time', width: 140 },
      ],
      fields: [
        { title: '仓库代码', key: 'warehouse_code', required: true },
        { title: '仓库名称', key: 'warehouse_name', required: true },
        { title: '仓库类型', key: 'warehouse_type', required: true, name: 'select', options: [], props: {} },
        { title: '先进先出管控', key: 'fifo_control', name: 'switch', props: { activeValue: 'Y', inactiveValue: 'N' } },
        {
          title: '锁定',
          key: 'is_locked',
          name: 'switch',
          tips: '锁定后此仓库内的物料将无法进行出入库',
          props: { activeValue: '1', inactiveValue: '0' },
        },
        { title: '备注', key: 'remarks' },
      ],
      initData: {
        warehouse_type: null,
        fifo_control: 'Y',
        is_locked: '0',
      },
      typeOptions: [],
    }
  },
  methods: {
    getWhType(v) {
      let tmp = this.typeOptions.find((x) => x.value == v)
      return tmp?.label
    },
  },
  created: function () {
    this.getList()
    this.$request(this.$api.dictionary + 'getdirectchildren', {
      parentType: 'warehouse_type',
    }).then((r) => {
      this.typeOptions = r
      this.getFieldConfig('warehouse_type').options = r
    })
    // this.getFieldConfig('warehouse_type').options = this.typeOptions
  },
}
</script>
<style scoped>
</style>
